<template>
  <div class="register-page">
    <el-form ref="form" label-position="left" :model="registerForm" label-width="120px">
      <el-form-item label="产品名称">
        可视化融媒体综合管理平台
      </el-form-item>
      <el-form-item label="注册码">
        <el-input :disabled="true" v-model="machineCode">
          <template slot="append">
            <el-button @click="copyMethods">复制</el-button>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="授权码">
        <el-input
          type="textarea"
          :rows="4"
          placeholder="请输入内容"
          v-model="registerForm.authorization"
        >
        </el-input>
      </el-form-item>

      <el-form-item label="授权码">
        <el-button type="primary" @click="setAuth">授权激活</el-button>
      </el-form-item>

      <el-form-item label="授权状态">
        <div>{{['未激活', '已激活', '已过期'][isAccess]}}</div>
      </el-form-item>
      <el-form-item label="到期时间">
        <div>{{format(systemInfo.clientExpireDate, 'YYYY-MM-DD')}}</div>
      </el-form-item>
      <el-form-item label="最大客户端数">
        <div>{{systemInfo.clientMaxCount}}</div>
      </el-form-item>
      <el-form-item label="功能">
        <div>文件分发</div>
      </el-form-item>
    </el-form>


  </div>
</template>

<script>
import clipboard from 'clipboard';
import {AESDecrypt} from '@/utils/utils'
import * as service from './service'
import format from "@/utils/format";
export default {
  name: 'registerPage',
  data() {
    return {
      machineCode: '',
      registerForm: {
        authorization: ''
      },
      systemInfo: {
        clientExpireDate: '',
        clientMaxCount: ''
      },
      isAccess: false
    }
  },
  mounted() {
    this.getCode()
    this.getAuth()
  },
  methods: {
    format,
    copyMethods() {
      clipboard.copy(this.machineCode)
      this.$message.success('复制成功')
    },
    getAuth() {
      this.isAccess = window.localStorage.getItem('isAccess')
      if(this.isAccess == 1 || this.isAccess == 2) {
        service.getAuthorization({}).then((res) => {
          this.systemInfo = {...res}
        })
      }
    },
    setAuth() {
      if(this.registerForm.authorization === '') {
        this.$message.error('请输入授权码')
        return
      }
      if(!AESDecrypt(this.registerForm.authorization.trim(), this.machineCode)) {
        this.$message.error('请输入正确的授权码')
        return
      }
      const params = {
        authorization: this.registerForm.authorization.trim()
      }

      service.setAuthorization(params).then((res) => {
        this.$message.success('授权成功')
        window.localStorage.setItem('isAccess', 1)
        this.getAuth()
        setTimeout(() => {
          window.location.href = '/'
        }, 1000)
      })
    },
    getCode() {
      service.getMachineCode({}).then((res) => {
        this.machineCode = res
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .register-page{
    padding: 1rem 2rem;
    background-color: #ffffff;
  }
</style>
